<!--
 * @Author: xuna
 * @Descripttion: 查看报名活动
-->
<template>
  <div>
    <el-drawer
      title="查看详情"
      :visible.sync="isOpenCheck"
      :direction="direction"
      size="40%"
      :before-close="beforeClose"
      class="draw-panel"
    >
      <div v-loading="loading" class="detail-wrap demo-ruleForm ">
        <div class="detail-label">基本信息</div>
        <div class="basic-detail">
          <img v-if="signDetail.headImgs" :src="signDetail.headImgs" alt="" />
          <div class="basic-info">
            <p class="basic-status">
              <span>
                【{{
                  signDetail.activityStatus == 0
                    ? '未开始'
                    : signDetail.activityStatus == 1
                    ? '进行中'
                    : signDetail.activityStatus == 2
                    ? '已结束'
                    : '已结束'
                }}】
              </span>
              {{ signDetail.entryTitle }}
            </p>
            <!-- <p class="explain">{{ signDetail.activityDocument }}</p> -->
            <p class="label-tip ">
              报名时间：
              <span>{{ signDetail.entryStartTime }}~{{ signDetail.entryEndTime }}</span>
            </p>
            <p class="label-tip ">
              报名人数：
              <span>{{ signDetail.joinNumber }}/{{ signDetail.shareCount }}</span>
            </p>
            <p class="label-tip ">
              活动时间:
              <span>{{ signDetail.activityStartTime }}~{{ signDetail.activityEndTime }}</span>
            </p>
          </div>
          <el-button
            class="primary-btn"
            type="primary"
            :disabled="signDetail.activityStatus > 1"
            @click="onSelectUsersBtnClick"
          >
            发送薪友
          </el-button>
        </div>
        <div class="detail-label">活动详情</div>
        <!-- eslint-disable-next-line vue/no-v-html -->
        <div class="activity-detail" v-html="signDetail.activityDetail"></div>
        <div class="detail-label">
          已报名
          <span>已有 {{ signDetail.joinNumber }}人报名</span>
        </div>
        <div class="sign-detailinfo">
          <!-- :class="{ 'default-btn': signDetail.userList.length == 0 }" -->
          <span class="send-btn" @click="exportList">
            导出
          </span>
          <el-table :data="signDetail.userList" stripe style="width: 100%;">
            <el-table-column
              v-for="item in signDetail.propData"
              :key="item.val"
              :prop="item.val"
              :label="item.label"
            ></el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
    <select-users ref="selectUsers" :title="selectTip" @on-ok="onSelectedUsers" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { checkSignDetail, signExptUserList, signSentTickets } from '@/api/votesign';
  import { downloadBlob } from '@/utils/download';
  import SelectUsers from './SelectUsers';
  export default {
    components: {
      SelectUsers,
    },
    props: {
      checkRow: {
        type: Object,
        default() {
          return {};
        },
      },
      isOpenCheck: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      return {
        direction: 'rtl',
        loading: false,
        signDetail: { userList: [], propData: [] },
        selectTip: '报名',
        signList: [
          { val: 'realName', label: '姓名' },
          { val: 'mobilePhone', label: '手机号' },
          { val: 'idCard', label: '身份证号' },
          { val: 'sex', label: '性别' },
          { val: 'email', label: '邮箱' },
          { val: 'jobNumber', label: '工号' },
          { val: 'organName', label: '部门' },
          { val: 'position', label: '职位' },
        ],
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
    },
    watch: {
      checkRow(newDtat, oldData) {
        console.log(newDtat, oldData, '-------------eee---');
        if (!this.isOpenCheck) return;
        this.initDetail();
      },
    },
    activated() {},
    methods: {
      initDetail() {
        this.loading = true;
        try {
          checkSignDetail({ id: this.checkRow.id }).then(res => {
            this.loading = false;
            if (res.status == 200) {
              console.log(res);
              this.signDetail = res.data;
              let data = res.data;
              if (data.userList.length) {
                this.signDetail.userList = data.userList.map(val => {
                  val.sex = val.sex == 0 ? '女' : val.sex == 1 ? '男' : '未知';
                  return val;
                });
              }
              let exportConf = JSON.parse(res.data.exportConf);
              this.signDetail.propData = [];
              this.signList.map(ele => {
                if (exportConf[ele.val]) {
                  this.signDetail.propData.push(ele);
                }
              });
            } else {
              this.signDetail = {};
            }
          });
        } catch (error) {
          this.loading = false;
        }
      },
      beforeClose() {
        this.$emit('closeDrawer', false);
      },
      onSubmit() {
        console.log(this.ruleForm);
      },
      ladderChange() {
        if (this.ruleForm.voteType.length > 1) {
          this.ruleForm.voteType.shift();
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addOption(val) {
        if (val) {
          this.optionList.push(val);
          this.ruleForm.optionset = '';
        }
      },
      deleteOption(val, index) {
        this.optionList.splice(index, 1);
      },
      async exportList() {
        signExptUserList({ id: this.checkRow.id }).then(res => {
          var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
          downloadBlob(blob, res.fileName || '报名人员名单.xls');
        });
      },
      onSelectUsersBtnClick() {
        if (this.signDetail.activityStatus > 1) return;
        this.$refs['selectUsers'].show(this.organizationId);
      },
      onSelectedUsers(list) {
        if (list.length > 0) {
          let userList = [];
          list.map(val => {
            userList.push(val.userId);
          });
          let objData = {
            id: this.checkRow.id,
            userList,
          };
          console.log(objData);
          try {
            signSentTickets(objData).then(res => {
              if (res.status == 200) {
                this.$emit('refreshData', true);
                this.initDetail();
                this.$message({
                  type: 'success',
                  message: '发送成功!',
                });
              }
            });
          } catch (error) {}
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  /deep/ .el-drawer__body {
    padding-left: 20px;
  }
  .draw-panel {
    /deep/.el-drawer {
      border-radius: 14px 0 0 14px;
    }
    /deep/.el-drawer__header {
      display: flex;
      align-items: center;
      @include font(16px, #34363b, bold);
      height: 60px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 12px 0px rgba(194, 194, 198, 0.31);
      padding: 0 0 0 14px;
      margin-bottom: 0;
    }
    /deep/.el-drawer__body {
      padding: 0;
      box-sizing: border-box;
      overflow-y: auto;
      position: relative;
    }
    .detail-label {
      @include wh(100%, 51px);
      background-color: #f7f6f9;
      display: flex;
      align-items: center;
      @include font(14px, #6d6e6e, 800);
      padding-left: 14px;
      box-sizing: border-box;
      span {
        @include font(13px, #464649, 400);
        margin-left: 10px;
      }
    }
    .demo-ruleForm {
      width: 100%;
      .primary-btn {
        margin-top: 10px;
      }
      .send-btn {
        @include wh(94px, 36px);
        @include font(14px, #fff, 800);
        background: #3771e9;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 16px 0 20px;
        cursor: pointer;
        &.default-btn {
          color: #e8e4e8;
          background-color: #fff;
          border: 1px solid #e8e4e8;
        }
      }
      .basic-detail {
        padding: 14px 16px 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #efeff0;
        > img {
          @include wh(262px, 118px);
          border-radius: 7px;
        }

        .basic-info {
          p {
            margin-bottom: 16px;
            &:last-of-type {
              margin: 0;
            }

            &.label-tip {
              @include font(13px, #7f848b, 400);
              span {
                @include font(14px, #1e2023, 400);
                margin-left: 10px;
              }
            }
            &.explain {
              @include font(13px, #7f848b, 400);
            }
            &.basic-status {
              @include font(16x, #1e2023, 600);
              margin-bottom: 14px;
              span {
                @include font(16x, #3770eb, 800);
              }
            }
          }
        }
      }
      .activity-detail {
        background-color: #fff;
        min-height: 100px;
        padding: 0 10px;
        box-sizing: border-box;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
      }
      .sign-detailinfo {
        padding: 14px 16px 65px;
        box-sizing: border-box;
        span {
          margin: 0 0 13px;
        }
      }
    }
  }
</style>
